<template>
  <div id="container">
    <div class="">
      <h1 class="chief-title">{{title}}</h1>
    </div>
    <div class="nav-container">
      <div>
        <a-menu v-model="current" mode="horizontal" @click="selMenuItem">
          <a-menu-item key="mi-1">
            五金厂
          </a-menu-item>
          <a-menu-item key="mi-2">
            包装印刷厂
          </a-menu-item>
          <a-menu-item key="mi-3">
            模具厂
          </a-menu-item>
          <a-menu-item key="mi-4">
            贴片厂
          </a-menu-item>
          <a-menu-item key="mi-5">
            组装厂
          </a-menu-item>
        </a-menu>
      </div>
    </div>
    <div class="pic-container">

      <FactoryCard1 class="pic-card-1" :title="data[currentKey].title" :subTitle="data[currentKey].subTitle">
      </FactoryCard1>
      <template>
        <FactoryCard2 v-for="item in data[currentKey].picUrls" :key="item" :picUrl="item"></FactoryCard2>
      </template>
    </div>

  </div>
</template>
<script>
import FactoryCard1 from "./FactoryCard1";
import FactoryCard2 from "./FactoryCard2";

export default {
  name: "Scene",
  components: {
    FactoryCard1,
    FactoryCard2
  },
  data() {
    return {
      title: "研发供应厂商现场真实展示",

      current: ["mi-1"],
      data: {
        "mi-1": {
          title: "拥有五金厂供应商528家",
          subTitle:
            "五金类产品在产品中起着不可替代的作用，选择好的五金配件可以使很多结构件使用起来更安全、便捷。",
          picUrls: [
            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7y2xykhgxj3083083wf5.jpg",
            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7y2yjb13qj3083083dge.jpg",
            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7y3a716g6j3083083q3p.jpg",
            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7y3axyqicj3083083754.jpg",
            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7y3bec269j30830833z3.jpg",
            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7y3byrejoj3083083t9p.jpg",
            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7y3c8oduuj3083083jse.jpg"
          ]
        },
        "mi-2": {
          title: "拥有五金厂供应商528家",
          subTitle:
            "五金类产品在产品中起着不可替代的作用，选择好的五金配件可以使很多结构件使用起来更安全、便捷。",
          picUrls: [
            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7y3a716g6j3083083q3p.jpg",
            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7y2yjb13qj3083083dge.jpg",
            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7y3bec269j30830833z3.jpg",
            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7y3axyqicj3083083754.jpg",
            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7y2xykhgxj3083083wf5.jpg",
            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7y3c8oduuj3083083jse.jpg",
            "https://tva1.sinaimg.cn/large/006y8mN6gy1g7y3byrejoj3083083t9p.jpg"
          ]
        }
      },
      currentKey: "mi-1"
    };
  },
  methods: {
    selMenuItem(e) {
      this.currentKey = e.key;
    }
  }
};
</script>

<style scoped>
#container {
  width: 100%;
  background: #fff;
  padding-top: 60px;
  padding-bottom: 60px;
}

.chief-title {
  font-size: 44px;
  color: #1e1e1e;
  text-align: center;
  font-weight: 400;
  margin-bottom: 62px;
}

.nav-container {
  width: 70%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.pic-container {
  width: 80%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}
.pic-card-1 {
  text-align: left;
  padding-top: 50px;
  padding-left: 30px;
}

.ant-menu-horizontal {
  border: 0;
}
.ant-menu-item-selected,
.ant-menu-item-active,
.ant-menu-item:hover {
  border-bottom: 3px solid #1890ff;
}
.ant-menu-item {
  font-size: 20px;
  cursor: pointer;
  padding-left: 0;
  padding-right: 0px;
  margin-right: 100px;
}
</style>